<template>
  <!--复查-->
  <div id="review">
    <mu-expansion-panel :expand="operType == 'review' ? true : false "  v-if="reviewDetailVo" class="noshadow">
      <div slot="header" class="noshadow_tit">
        <div><span class="noshadow_tit_con">复查人：</span><span class="noshadow_tit_name">{{ reviewDetailVo.reviewUserName||'---'}}</span></div>
        <div><span class="noshadow_tit_con">复查时间：</span><span class="noshadow_tit_name">{{ reviewDetailVo.reviewTime || '---'}}</span></div>
      </div>
      <div v-if="operType ==  'review' && reviewDetailVo.reviewStatus == '0'">
        <mu-form :model="form" class="mu-lan-form" :label-position="'left'" label-width="">
          <mu-form-item label="复查结果" class="form-between required">
            <mu-flex class="select-control-row" >
              <mu-radio style="margin-right: 10px"
                        value="0"
                        key="0"
                        v-model="form.reviewResult"
                        label="合格"></mu-radio>
              <mu-radio style="margin-right: 10px"
                        value="1"
                        key="1"
                        v-model="form.reviewResult"
                        label="不合格"></mu-radio>
            </mu-flex>
          </mu-form-item>
          <mu-form-item label="复查结果描述" class="inline-item required">
            <mu-text-field v-model="form.rectificationResult" multi-line placeholder="请输入" :rows="4"
                           :rows-max="8"></mu-text-field>
          </mu-form-item>
          <mu-form-item label="现场照片" class="inline-item">
            <div class="ly_flex ly_flex_wrap_wrap">
              <div
                style="position: relative;width: .7rem;height: .7rem;margin-right: .095rem;margin-bottom: .08rem;border-radius:0.02rem;background:rgba(216,216,216,1);overflow: hidden"
                v-for="(url, index) in handurl(form.scenePhotos)" :key="index">
                <img :preview="index" :src="url" style="transform: scale(1.5)" alt="">
                <i class="iconfont iconqingchu" @click.stop="delImg(form, url)"
                   style="color: #FF4242;position: absolute;right: .05rem; top: 0;"></i>
              </div>
              <div style="margin: 0 .1rem .14rem 0;">
                <FileUpload @successed="confirm('imgUpload',{res: $event, form})" v-if="handurl(form.scenePhotos).length < 5"></FileUpload>
              </div>
            </div>
          </mu-form-item>
          <mu-form-item label="申请问题闭合" v-if="form.reviewResult == '1'" class="form-between required">
            <mu-flex class="select-control-row" >
              <mu-radio style="margin-right: 10px"
                        value="0"
                        key="0"
                        v-model="form.isApplyClose"
                        label="是"></mu-radio>
              <mu-radio style="margin-right: 10px"
                        value="1"
                        key="1"
                        v-model="form.isApplyClose"
                        label="否"></mu-radio>
            </mu-flex>
          </mu-form-item>
          <mu-form-item label="备注" v-if="form.isApplyClose == '0' && form.reviewResult == '1'" class="inline-item required">
            <mu-text-field v-model="form.applyDesc" multi-line placeholder="请输入" :rows="4"
                           :rows-max="8"></mu-text-field>
          </mu-form-item>
          <mu-form-item label="审核人" v-if="form.isApplyClose == '0' && form.reviewResult == '1'" class="form-between required">
              <span class="normal-font-size form-right-text">
                {{form.checkUserName ? form.checkUserName : '请选择'}}</span>
          </mu-form-item>
          <mu-form-item label="复查人签名" class="form-between " >
            <span class="normal-font-size form-right-text" @click="opensign">
              {{form.rectificationSignature?'已签名':'请签名'}}</span>
            <i class="iconfont angle-left iconangle-right"></i>
          </mu-form-item>
          <div class="box" v-if="form.rectificationSignature">
            <!-- <div class="line-list autograph">
              <div class="img-con">
                <img preview="0" class="img" :src="form.rectificationSignature" alt="">
              </div>
            </div> -->
            <div class="img-box">
              <img  preview="0" class="img" :src="form.rectificationSignature" alt="">
              <mu-icon class="close" value="close" @click="deletesign"></mu-icon>
            </div>
          </div>
        </mu-form>
        <div style="padding:0 14px;">
          <mu-button full-width color="primary" style="margin:.2rem 0" @click="save">提交</mu-button>
        </div>
      </div>
      <section v-else class="box">
        <p class="line-list textdot">
          复查结果：<span class="line-list-con">{{ reviewDetailVo.reviewResult == 0 ? '合格':'不合格' }}</span>
        </p>
        <p class="line-list textdot">
          复查结果描述：<span class="line-list-con">{{reviewDetailVo.reviewDesc || '---'}}</span>
        </p>
        <section class="line-list img-box">
          现场照片：
          <div class="img-con" >
            <img :preview="index" v-for="(i,index) in handurl(reviewDetailVo.scenePhotos || null) " :key="index" class="img" :src="i"/>
          </div>
        </section>
        <div v-if="reviewDetailVo.problemCloseVo" style="border-top:1px dotted #E0E0E0;">
          <p class="line-list textdot"><span class="line-list-con">申请问题闭合</span></p>
          <p class="line-list textdot">
            申请人：<span class="line-list-con">{{reviewDetailVo.problemCloseVo.applyUserName || '---'}}</span>
          </p>
          <p class="line-list textdot">
            申请时间：<span class="line-list-con">{{reviewDetailVo.problemCloseVo.applyTime || '---'}}</span>
          </p>
          <p class="line-list textdot">
            备注：<span class="line-list-con">{{reviewDetailVo.problemCloseVo.applyRemark || '---'}}</span>
          </p>
        </div>
      </section>
    </mu-expansion-panel>
    <!--图片预览-->
    <FilePreview :fileUrl="imgPreview.imgUrl" :open="imgPreview.open" @close="close('imgPreview')"></FilePreview>
    <!-- 签名 -->
    <mu-dialog
      width="100%"
      transition="slide-right"
      fullscreen
      :open.sync="signature"
      class="lan-dialog"
    >
      <div style="height:100%;width:100%;" >
        <Signature v-if="signature"  @close="signature = false" @success="signatureBack"></Signature>
      </div>
    </mu-dialog>
  </div>
</template>

<script>
  import Preview from './../preview/ImgPreview'
  import FilePreview from "@/preview/FilePreview.vue"
  import FileUpload from "@/fileUpload/FileUpload.vue"
  import Signature from "@/signature/Signature";
   import { MessageBox } from "mint-ui";
  export default {
    name: "review",
    components:{
      Preview,
      FilePreview,
      FileUpload,
      Signature,
      MessageBox
    },
    props:{
      reviewDetailVo:{
        type:Object,
        default: function () {
          return {}
        }
      },
      operType: {
        type: String,
        default: ''
      },
      obj: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data () {
      return{
        api: {
          reviewApi:'/safety/checkReview/submit'
        },
        form: {
          id: '', // 整改ID
          scenePhotos: '', //照片
          problemId:'',
          rectificationSignature: '', // 签名
          rectificationResult: '', // 结果描述
          reviewResult: '', // 复查结果 0:合格 1:不合格
          isApplyClose: '',//是否申请问题闭合 0:是 1:否
          type: 1, //  复查来源 1协同检查 2问题上报 3实测实量
          applyDesc: ''//描述
        },
        // 图片预览
        imgPreview: {
          open: false,
          imgUrl: ''
        },
        // 区域选择
        // 图片上传
        imgUpload: {
          open: false,
        },
        signature:false,
        signatureList:[]
      }
    },
    watch: {
      reviewDetailVo: {
        handler(newVal, oldVal) {
          this.form['responsibleUserName'] = newVal.responsibleUserName
          this.form['id'] = newVal.reviewId //
          this.form['problemId'] = newVal.problemId
        },
        immediate: true,
        deep: true
      },
      obj: {
        handler(newVal, oldVal) {
          this.form['checkUserName'] = newVal.checkUserName
          this.form['checkUserId'] = newVal.checkUserId
          this.form['reviewResult'] = '1'
          this.form['isApplyClose'] = '1'
        },
        immediate: true,
        deep: true
      }
    },
    methods:{
      // 组件打开
      open(type, props = {}) {
        switch (type) {
          // 组织
          case 'org':
            this.org.open = true
            break;
          // 人员
          case 'user':
            this.user.res= []
            this.form = props.form
            this.user.type = props.type
            if(this.user.type == 'reviewUser') {
              this.user.multiple = false
              this.user.res = props.form.reviewUsers || []
            }
            this.user.open = true
            break;
          // 区域
          case 'area':
            this.area.open = true
            break;
          // 图片预览
          case 'imgPreview':
            this.imgPreview.imgUrl = props.url
            this.imgPreview.open = true
            break;
          // 图片上传
          case 'imgUpload':
            this.imgUpload.open = true
            break;
        }
      },
      // 组件弹窗关闭
      close(type, props = {}) {
        switch (type) {
          // 组织
          case 'org':
            this.org.open = false
            break;
          // 人员
          case 'user':
            this.user.open = false
            break;
          // 区域
          case 'area':
            this.area.open = false
            break;
          // 图片预览
          case 'imgPreview':
            this.imgPreview.open = false
            break;
          // 图片上传
          case 'imgUpload':
            this.imgUpload.oen = false
            break;
        }
      },
      // 结果确认
      confirm(type, props) {
        switch (type) {
          // 图片预览
          case 'imgPreview':
            this.imgPreview.open = false
            break;
          // 图片上传
          case 'imgUpload':
            this.addImg(props.form, this.$A.baseUrl[0] + "/safety/system/download?fileUrl=" + props.res.body)
            this.imgUpload.oen = false
            break;
        }
      },

      handurl(str) {
        if (!str) {
          return []
        } else {
          return str.split(',')
        }
      },
      // 添加照片
      addImg(form, url) {
        let arr = this.handurl(form.scenePhotos)
        arr.push(url)
        form.scenePhotos = arr.join(',')
      },
      // 删除照片
      delImg(form, url) {
        let arr = this.handurl(form.scenePhotos)
        arr.splice(arr.indexOf(url), 1)
        form.scenePhotos = arr.join(',')
      },
      opensign(){
        if(this.signatureList.length>0){
          return;
        }
        this.signature = true
      },
      deletesign(index){
        // this.signatureList.splice(index,1)
        // this.form.rectificationSignature = ''
        this.signatureList = []
        this.form.rectificationSignature = ''
      },
      signatureBack(url){
        this.signatureList.push(url)
        this.signature = false;
        this.form.rectificationSignature = url;
      },
      // 验证表单
      validateForm() {
        // if (!this.form.scenePhotos) {
        //   this.$A.MS(`请添加现场照片`)
        //   return false
        // }

        if (!this.form.rectificationResult) {
          this.$A.MS(`请填写复查结果描述`)
          return false
        }
        if (this.form.reviewResult == '1' && this.form.isApplyClose == '0') {
          if (!this.form.applyDesc) {
            this.$A.MS(`请填写备注`)
            return false
          }
        }

        // if (!this.form.rectificationSignature) {
        //   this.$A.MS(`复查人未签名`)
        //   return false
        // }
        return true
      },
      save() {
        console.log(11)
        let _this = this
        if(this.validateForm()) {
          if(this.form.isApplyClose == 0){
             MessageBox({
            message: "确认申请问题闭合？",
            showCancelButton: true,
            showConfirmButton: true,
            confirmButtonText: "确认",
            cancelButtonText: "取消"
          })
            .then((value, action) => {
              console.log(value)
              if (value == "confirm") {
                _this.goPost();
              } else {
                
              }
            })
            .catch(err => {});
          }else{
            _this.goPost();
          }
         
        }
      },
      goPost(){
         this.$A
            .Go("post", this.api.reviewApi, this.form)
            .then(response => {
              Util.processRes(response, () => {
                this.$A.MS(`提交成功`)
                this.$router.back()
              });
              Util.processError(this, response);
            })
            .catch(err => {
              this.$closeLoading()
              console.log(err);
            });
      }
    },


  }
</script>

<style scoped lang="scss">
  @import "assign.scss";
  .img-box{
    width:0.75rem;
    height:0.75rem;
    margin:0.1rem;
    position: relative;
    img{
      height:100%;
      width:100%;
    }
    .close{
      position: absolute;
      height:0.2rem;
      width:0.2rem;
      line-height:0.2rem;
      font-size:0.15rem;
      top: 0.04rem;
      right: 0.04rem;
      color:#fff;
      border-radius: 50%;
      text-align:center;
      background-color: #FF4242;
    }
  }
</style>
<style lang="scss">
  #review{
    .mu-lan-form{
      background: unset;
    }
  }
</style>
